<template>
  <div>
    <div>
       <a-date-picker v-model="operTime_$_eq" format="YYYY-MM-DD" class="topsearchstyle"/>
      <a-input placeholder="用户名" v-model="operUserName_$_like" allow-clear style="width:220px" class="topsearchstyle"/>
      <a-input placeholder="接口名称" v-model="title_$_like" allow-clear style="width:250px" class="topsearchstyle"/>
      <a-button type="primary" class="topsearchstyle" @click="serachHandle">搜索</a-button>
      <a-button @click="handleReset">重置</a-button>
    </div>
    <a-table :columns="columns" :data-source="data" :pagination="false" :rowKey="record=>record.id">
    </a-table>
    <div class="fenye">
      <a-pagination
        v-model="current"
        show-size-changer
        :page-size.sync="pageSize"
        :total="totalnum"
        @showSizeChange="onShowSizeChange"
        :show-total="total => `共 ${total} 条`"
      />
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      columns: [
        {
          title: "请求时间",
          dataIndex: "operTime",
          key: "operTime",
          customRender: (text, row, index) => {
            return moment(text).format('YYYY-MM-DD')
          }
        },
        {
          title: "操作人",
          dataIndex: "operUserName",
          key: "operUserName"
        },
        {
          title: "请求地址",
          dataIndex: "openUrl",
          key: "openUrl"
        },
        { title: "所属接口", dataIndex: "title", key: "title" }
      ],
      data: [],
      totalnum: 0,
      pageSize: 10,
      current: 1,
      operUserName_$_like:"",
      title_$_like:"",
      operTime_$_eq:""
    };
  },
  mounted() {
    this.querydata();
  },
  watch: {
    pageSize(val) {
      //点击切换一页多少条
      console.log("pageSize", val);
      let data = {
        pagesize: val,
        pageno: this.current
      };
      this.$axios.post("/operLog/service/findByPage", data).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.totalnum = res.data.rowCount;
          this.data = res.data.queryResult;
        }
      });
    },
    current(val) {
      //点击第几页
      console.log("current", val);

      let data = {
        pagesize: this.pageSize,
        pageno: val
      };
      if(this.operUserName_$_like != ""){
        data["operUserName"] = this.operUserName_$_like
      }
      if(this.title_$_like != ""){
        data["title"] = this.title_$_like
      }
      if(this.operTime_$_eq != ""){
        const istime = moment(this.operTime_$_eq).format('YYYY-MM-DD') //时间
        data["operTime"] = this.operTime_$_eq
      }
      this.$axios.post("/operLog/service/findByPage", data).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.totalnum = res.data.rowCount;
          this.data = res.data.queryResult;
        }
      });
    }
  },
  methods: {
    querydata() {
      let data = {
        pagesize: this.pageSize,
        pageno: this.current
      };
      this.$axios.post("/operLog/service/findByPage", data).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.totalnum = res.data.rowCount;
          this.data = res.data.queryResult;
        }
      });
    },
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
    },
    onChange(date, dateString) {
      console.log(date, dateString);

    },
    serachHandle(){ //搜索按钮
      let data ={
        pagesize: this.pageSize,
        pageno: this.current
      }
      if(this.operUserName_$_like != ""){
        data["operUserName"] = this.operUserName_$_like
      }
      if(this.title_$_like != ""){
        data["title"] = this.title_$_like
      }
      if(this.operTime_$_eq != ""){
        const istime = moment(this.operTime_$_eq).format('YYYY-MM-DD') //时间
        data["operTime"] = this.operTime_$_eq
      }
      this.$axios.post("/operLog/service/findByPage", data).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.totalnum = res.data.rowCount;
          this.data = res.data.queryResult;
        }
      });
    },
    handleReset(){ //重置
        this.operUserName_$_like =""
        this.title_$_like= ""
        this.operTime_$_eq= ""
        let data = {
        pagesize: 10,
        pageno: 1
      };
      this.$axios.post("/operLog/service/findByPage", data).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.totalnum = res.data.rowCount;
          this.data = res.data.queryResult;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.fenye{
  margin: 20px 0;
  
}
::v-deep .ant-pagination{
    display: inline-block;
    float: right;
  }
.topsearchstyle{
    margin-right: 20px;
  }
</style>
